<template>
  <div class="cell" @click="lookDetail()">
    <div class="avatar">
      <!-- <img src="@/assets/images/avatar.png" alt=""> -->
      <li-image
        :src="oInfo.logo"
        class="img"
        v-if="oInfo.logo"
        :is-preview="false"
        :alt="`${$cookies.get('city')}-${oInfo.name}`"
      ></li-image>
      <van-image
        :src="require('@/assets/images/avatar/hosp_default.png')"
        class="img"
        lazy-load
        :alt="`${$cookies.get('city')}-${oInfo.name}`"
        v-else
      />
    </div>
    <div class="info">
      <div class="title">{{ oInfo.name }}</div>
      <div class="rate">
        <!-- <van-rate v-model="oInfo.initScore" allow-half :size="16" color="#FF6600" class="van_rate" readonly /> -->
        <li-rate
          v-model="oInfo.initScore"
          allow-half
          :size="16"
          color="#FF6600"
          class="van_rate"
          readonly
        />
        <span class="star">{{ $fomartRate(oInfo.initScore) }}分</span>
        <span class="num">近期有{{ oInfo.initAppointmentCnt }}人预约</span>
      </div>
      <div class="address">
        <span>{{ oInfo.city }}</span>
        <span class="lili_divider"></span>
        <span>{{ oInfo.district }}</span>
        <span class="meter">{{ oInfo.meter || "--" }}km</span>
      </div>
      <div class="tag_list">
        <template v-for="(item, index) in oInfo.featuredLabels || []">
          <div class="tag" :key="`label_${index}`" v-if="index < 3">
            {{ item }}
          </div>
        </template>

        <!-- <div class="tag" v-if="oInfo.medicalInsurancePolicy == 1">医保定点</div>
                <div class="tag" v-if="oInfo.doctorCnt">{{ oInfo.doctorCnt }}位主治医师</div>
                <div class="tag" v-if="oInfo.caseCnt">{{ oInfo.caseCnt }}个案例</div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { Rate } from "vant";
import { getDistance } from "@/utils/utils";
export default {
  name: "Hospital",
  components: {
    [Rate.name]: Rate,
  },
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  watch: {
    info: {
      handler: function (n) {
        let gps = this.$cookies.get("GPS") || {};
        n.meter = getDistance(n.lng, n.lat, gps.lng, gps.lat);
        this.oInfo = n;
      },
      immediate: true,
    },
  },
  data() {
    return {
      oInfo: {},
      value: 4,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 查看医院详情
    lookDetail() {
      let id = this.oInfo.id;
      let query = this.query;
      this.$router.push({
        path: `/hospital/detail/${id}`,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>